<template>
  <div v-show="getShow">
    <LoginFormTitle class="enter-x" title="登录" />
    <a-form-model
      class="p-4 enter-x"
      :model="loginForm"
      :rules="loginRules"
      ref="loginForm"
      @keypress.enter="handleLogin"
    >
      <a-form-model-item ref="username" prop="username" class="enter-x">
        <a-input size="large" v-model:value="loginForm.username" placeholder="账号" />
      </a-form-model-item>
      
      <a-form-model-item ref="password" prop="password" class="enter-x">
        <a-input-password
          size="large"
          visibilityToggle
          v-model:value="loginForm.password"
          placeholder="密码"
        />
      </a-form-model-item>
      <a-row class="enter-x">
        <a-col :span="12">
          <a-form-item>
            <a-checkbox name="type" v-model="loginForm.remember" size="small">记住我</a-checkbox>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item :style="{ 'text-align': 'right' }">
            <!-- No logic, you need to deal with it yourself -->
            <a-button type="link" size="small" @click="setLoginState('ForgetPassword')">忘记密码?</a-button>
          </a-form-item>
        </a-col>
      </a-row>
      <a-form-item class="enter-x">
        <a-button type="primary" size="large" :loading="loading" block  @click="handleLogin">
          登录
        </a-button>
        <!-- <Button size="large" class="mt-4 enter-x" block @click="handleRegister">
          {{ t('sys.login.registerButton') }}
        </Button> -->
      </a-form-item>
      <a-row class="enter-x">
        <a-col :xs="24" :md="8">
          <a-button block @click="setLoginState('MOBILE')">手机登录</a-button>
        </a-col>
        <a-col :md="8" :xs="24" class="!my-2 md:!my-0 xs:mx-0 md:mx-2">
          <a-button block @click="setLoginState('QR_CODE')">二维码登录</a-button>
        </a-col>
        <a-col :md="7" :xs="24">
          <a-button block @click="setLoginState('REGISTER')">注册</a-button>
        </a-col>
      </a-row>

      <a-divider class="enter-x">其他登录方式</a-divider>

      <div class="flex justify-evenly enter-x" :class="`${prefixCls}-sign-in-way`">
        <a-icon type="github" />
        <a-icon type="wechat" />
        <a-icon type="alipay-circle" />
        <a-icon type="google" />
        <a-icon type="twitter" />
      </div>
    </a-form-model>
  </div>
</template>
<script>
import LoginFormTitle from './LoginFormTitle';
import { isPhone, isPassWord, isCode } from '@/utils/validate';
import { getCache, setCache, removeCache } from '@/utils/session';

export default {
  name: 'LoginForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  components: {
    LoginFormTitle
  },
  computed: {
    getShow: {
      get: function() {
        return this.visible
      },
      set: function(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  mounted() {
    const cache = getCache('LOGIN_INFO');
    if (cache) {
      this.loginForm.username = cache.username;
      this.loginForm.password = cache.password;
    }
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value.trim().length === 0) {
        callback(new Error('用户名不能为空'));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (!isPassWord(value)) {
        callback(new Error('请正确输入密码'));
      } else {
        callback();
      }
    };
    const validatePhone = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error('手机号码有误，请重新填写'));
      } else {
        callback();
      }
    };
    const validateCode = (rule, value, callback) => {
      if (!isCode(value)) {
        callback(new Error('验证码有误，请重新填写'));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: 'admin',
        password: 'admin123',
        remember: false
      },
      getFormRules: {},
      prefixCls: "vben-login",
      loginRules: {
        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
        phone: [{ required: true, trigger: 'blur', validator: validatePhone }],
        code: [{ required: true, trigger: 'blur', validator: validateCode }]
      },
      loading: false
    };
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          const { username, password } = this.loginForm;
          this.$store.dispatch('user/login', { username, password }).then(() => {
            if (this.loginForm.remember) {
              setCache('LOGIN_INFO', { username, password });
            } else {
              removeCache('LOGIN_INFO');
            }
            
            let path = '/index';
            if (this.loginForm.username == 'editor') {
              path = '/components/editor';
            }
            // this.$router.push({
            //   path: path
            // });
            window.location = path;
            this.loading = false;
          }).catch(() => {
            setTimeout(() => {
              this.loading = false;
            }, 500);
          });
        } else {
          return false;
        }
      });
    },
    setLoginState(loginState) {
      this.$emit('setLoginState', loginState);
    },
  }
}
</script>
